﻿<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Web Form Desinger</title>
    <!-- Le styles -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/layoutit.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/smoothness/theme.css" />
    <link rel="stylesheet" href="css/smoothness/jquery-ui.min.css" />
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/multiple-select.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="js/jqueryui-ruler/css/jquery.ui.ruler.css" />
    <link href="css/spectrum.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.json.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/BootstrapMenu.min.js"></script>
    <script type="text/javascript" src="js/multiple-select.js"></script>
    <script type="text/javascript" src="js/spectrum.js"></script>
    <script type="text/javascript" src="js/Designer.js"></script>
    <style type="text/css">
        /*control-selected 为动态样式，需要加上 !important,优先级才能高于本身的样式*/
        .control-selected
        {
            border-style:solid !important;
            border-width:2px !important;
            border-color:#ddd !important;
        }
    </style>
</head>
<body style="min-height: 231px; cursor: auto;" class="edit">
<!-- 最上端的工具栏 -->
<div class="navbar navbar-inverse navbar-fixed-top" >
    <div class="navbar-header">
        <a class="navbar-brand" style="color:white;" href="javascript:void()">Web Form Desinger</a>
    </div>
    <div class="btn-group">
        <button class="btn btn-primary navbar-btn" id="btnNew"><i class="fa fa-file"></i> 新建</button>
        <button class="btn btn-primary navbar-btn dropdown-toggle" id="btnOpen" data-toggle="dropdown"><i class="fa fa-folder"></i> 打开 <span class="caret"></span></button>
        <ul id="fMenu" class="dropdown-menu" role="menu">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
    </div>
    <div class="btn-group" data-toggle="buttons-radio">
        <button type="button" id="edit" disabled="disabled" class="btn btn-primary navbar-btn active"><i class="fa fa-edit"></i> 编辑</button>
        <button type="button" class="btn btn-primary navbar-btn" id="sourcepreview"><i class="fa fa-file"></i> 预览</button>
        <button class="btn btn-primary navbar-btn" id="btnOpenInExplorer"><i class="fa fa-internet-explorer"></i> 在浏览器中打开</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-primary navbar-btn" href="#undo" id="undo" disabled="disabled"><i class="fa fa-undo"></i> 撤销</button>
        <button class="btn btn-primary navbar-btn" href="#redo" id="redo" disabled="disabled"><i class="fa fa-repeat"></i> 重做</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-primary navbar-btn" href="#undo" id="poup" disabled="disabled"><i class="glyphicon glyphicon-chevron-up"></i> 前置</button>
        <button class="btn btn-primary navbar-btn" href="#redo" id="podown" disabled="disabled"><i class="glyphicon glyphicon-chevron-down"></i> 后置</button>
    </div>
    <div class="btn-group">
        <button id="btnDownLoadSource" type="button" class="btn btn-primary navbar-btn" role="button"><i class="fa fa-file-code-o"></i> 源码</button>
        <button id="btnSave" class="btn btn-primary navbar-btn" href="/share/index" role="button" data-toggle="modal" data-target="#shareModal"><i class="fa fa-save"></i> 保存</button>
        <!--<button class="btn btn-primary navbar-btn" href="#clear" id="clear"><i class="icon-trash icon-white"></i>清空</button>-->
    </div>
     <div class="btn-group">
        <button id="btnFormFunc" type="button" class="btn btn-primary navbar-btn" role="button" title ="自定义函数"><i class="fa fa-file-text-o"></i>  函数</button>
    </div>
    <div class="btn-group">
        <label style="margin-left:50px; margin-top:5px; font-size:16px; font-weight:normal; color:white;" id="lbFormName"></label>
    </div>
</div>

<!-- 下面的内容，分为左右结构 -->
<div class="container" style="width:100%">
  <div class="row">
    <!-- 左边的控件栏 -->
    <div class="col-md-0">
        <div class="sidebar-nav">
        <!-- 布局设置；页面识别的表示为：lyrow 样式 -->
        <ul class="nav nav-list accordion-group">
            <li class="nav-header">页面布局 </li>
            <li style="display: none;" class="rows" id="estRows">
            <div class="lyrow ui-draggable"> 
                <div class="preview">
                容器<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="div" class="panel panel-default" style="min-height:50px; min-width:100px;"></div>
                </div>
            </div>

            <div class="lyrow ui-draggable"> 
                <div class="preview">
                面板<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="panel" class="panel panel-default" style="min-height:50px">
                        <div class="panel-heading">
                            面板标题
                        </div>
                        <div class="panel-body">
                        </div>
                    </div>
                </div>
            </div>

            <div class="lyrow ui-draggable">
                <div class="preview">
                标签页<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="tabpanel" style="min-height:120px;min-width:300px;">
                        <ul class="nav nav-tabs">
                           <li class="active">
                              <a href="#home" data-toggle="tab">页签1</a>
                           </li>
                        </ul>
                        <div class="tab-content" style="border-left:solid 1px #ddd; border-right:solid 1px #ddd; border-bottom:solid 1px #ddd;">
                           <div class="tab-pane fade in active" style="height: 100%;" id="home">
                           </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lyrow ui-draggable"> 
                <div class="preview">
                表格<span class="drag label"><i class="icon-move"></i>拖动</span> 
                </div>
                <div class="view">
                    <div controlType="table" style="width:60px; height:50px;">
                        <div class="table-box" style="width:100%; height:22px;">
                            <button type="button" class="btn btn-xs delete-table" role="button">删除</button>
                            <button type="button" class="btn btn-xs refresh-table" role="button">刷新</button>
                        </div>
                        <table class ="table table-bordered">
                           <tbody>
                              <tr style="height:35px;" class ="table-tr">
                                 <td></td>
                                 <td></td>
                              </tr>
                              <tr style="height:35px;" class ="table-tr">
                                 <td></td>
                                 <td></td>
                              </tr>
                           </tbody>
                        </table>
                    </div>
                </div>
            </div>
            </li>
        </ul>

        <!-- 界面控件；页面识别的表示为：box 样式 -->
        <ul class="nav nav-list accordion-group" id="viewControl">
            <li class="nav-header">界面控件</li>
            <li style="display: none;" class="boxes" id="elmBase">
            <div class="box box-element ui-draggable">
                <div class="preview">
                标签<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="label" class="form-group">
                        <label contenteditable="true">文本标签</label>
                    </div>
                </div>
            </div>
            <div class="box box-element ui-draggable">
                <div class="preview">
                分隔线<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="line" class="form-group">
                        <div class="line">
                            <span class="wz" >分割线</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box box-element ui-draggable"> 
                <div class="preview">
                按钮<span class="drag label"><i class="icon-move"></i>拖动</span> 
                </div>
                <div class="view">
                    <div controlType="button" class="form-group">
                        <button class="btn btn-success" type="button">按钮</button>
                    </div>
                </div>
            </div>
            <div class="box box-element ui-draggable"> 
                <div class="preview">
                图片<span class="drag label"><i class="icon-move"></i>拖动</span> 
                </div>
                <div class="view">
                    <div controlType="img" style="width:60px; height:50px;">
                        <img alt="图片" class="" style="width:100%; height:100%" src="css/images/pure.png" />
                    </div>
                </div>
            </div>
            <div class="box box-element ui-draggable"> 
                <div class="preview">
                图形<span class="drag label"><i class="icon-move"></i>拖动</span> 
                </div>
                <div class="view">
                    <div controlType="shape" style="min-width:20px;min-height:20px">
                        <svg id="isvg" width="100%" height="100%">
                            <ellipse cx="50%" cy="50%" rx="49%" ry="49%" stroke="#000"stroke-width="1" fill="#fff"/>
                        </svg>
                    </div>
                </div>
            </div>
            </li>
        </ul>

        <!-- 数据控件；页面识别的表示为：box 样式 -->
        <ul class="nav nav-list accordion-group" id="inputControl">
            <li class="nav-header">录入控件</li>
            <li style="display:list-item;" class="boxes" id="elmComponents">
            <div class="box box-element ui-draggable">
                <div class="preview">
                    文本框<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="text" style="width:200px; height:40px;" class="form-group">
                        <input type="text" class="form-control" style="font-family:SimSun;" id="text" placeholder="请输入文本信息" />
                    </div>
                </div>
            </div>
            <div class="box box-element ui-draggable">
                <div class="preview">
                    数字框<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="number" style="width:200px; height:40px;" class="form-group">
                        <input type="number" class="form-control" style="font-family:SimSun" id="number" placeholder="请输入数字" />
                    </div>
                </div>
            </div>
            <div class="box box-element ui-draggable">
                <div class="preview">
                    日期<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="date" style="width:200px; height:40px;float:left;" class="form-group">
                        <input type="date" class="form-control" style="float:left;font-family:SimSun" id="date" />
                        <button style="float:left; height:33px;" class="btn btn-default"><i class="fa fa-calendar-check-o"></i></button>
                    </div>
                </div>
            </div>
            <div class="box box-element ui-draggable">
                <div class="preview">
                    时间<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="time" style="width:200px; height:40px;" class="form-group">
                        <input type="time" class="form-control" style="font-family:SimSun" id="time" />
                    </div>
                </div>
            </div>
            <div class="box box-element ui-draggable">
                <div class="preview">
                    单选<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="radio">
                        <div><input type="radio" name="radioDj" value="1"/>选项1</div>
                        <div><input type="radio" name="radioDj" value="2"/>选项2</div>
                    </div>
                </div>
            </div>
            <div class="box box-element ui-draggable">
                <div class="preview">
                    复选框<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="checkbox" class="form-group" style="width:100%; height:100%;">
                        <label disabled class ="radio-inline">
                            <input type="checkbox" value="1" />单选项1
                        </label>
                    </div>
                </div>
            </div>
            <div class="box box-element ui-draggable">
                <div class="preview">
                    下拉框<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="select" class="form-group">
                        <select class="form-control" style="font-family:SimSun">
                        </select>
                    </div>
                </div>
            </div>
            <div class="box box-element ui-draggable">
                <div class="preview">
                    邮箱<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
                <div class="view">
                    <div controlType="email" style="width:200px; height:40px;" class="form-group">
                        <input type="email" class="form-control" style="font-family:SimSun" placeholder="请输入邮箱" />
                    </div>
                </div>
            </div>

            <div class="box box-element ui-draggable">
                <div class="preview">
                    字典<span class="drag label"><i class="icon-move"></i>拖动</span>
                </div>
               <!-- <div class="view">
                    <div controlType="dictionary" style="width:250px; float:left" class="form-group">
                        <input type="text" class="form-control" style="float:left; width:200px" placeholder="请选择字典" />
                        <button style="float:left; height:33px;" class="btn btn-default"><i class="fa fa-th-list"></i></button>
                    </div>
                </div>-->
                <div class ="view">
                    <div controlType="dictionary" style="width:200px; height:34px; float:left;font-family:SimSun" class="form-group">
		                <select multiple="multiple">
                            <option value="1">选项一</option>
                            <option value="2">选项二</option>
                            <option value="3">选项三</option>
                        </select>
                    </div>
                </div>
            </div>
                  <!--<div class="view">
                    <div controlType="datagrid">
                        <table  id="test"> 
                            <tr  class="header"> 
                                <td  style="width: 100px;"  sort='true'>  姓名 </td> 
                                <td  style="width: 100px;"  sort='true'>  性别 </td> 
                                <td  style="width: 100px;"  sort='true'>  年龄 </td> 
                                <td  style="width:200px;"  sort='true'>  住址 </td> 
                            </tr> 
                            <tr  class="itemtemplate"> 
                                <td  editable='true'> {姓名} </td> 
                                <td  editable='true'> {性别} </td> 
                                <td  editable='true'>  {年龄}</td> 
                                <td  editable='true'>  {住址}</td> 
                            </tr> 
                        </table> 
                    </div>
                </div>-->
            </li>
        </ul>
        </div>
    </div>
    

    <!-- 右边的主面板 -->
    <div class="col-md-12">
        <div style="min-height: 500px; padding-top:10px;" id="mainContent" class="demo ui-draggable ui-sortable" >
        </div>
    </div>

    <!-- 查看HTML的地方，先放着，到时候肯定要改造， -->
    <div id="download-layout">
      <div class="container"></div>
    </div>
  </div>
</div>
</body>
</html>